<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>博客列表页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogList.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <style>
        .layui-row {
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<!--导航栏-->
<div class="nav">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo"></div>
        </div>


        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="myblog.html">
                    <img src="images/myblog.png" alt="">
                    <span id="user">我的博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogPublish.html">
                    <img src="images/write.png" alt="">
                    <span>发布博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="javascript:logout()">
                    <img src="images/logout.png" alt="">
                    <span>退出登录</span>
                </a>
            </div>
        </div>
    </div>
</div>


<!--内容-->
<div class="container">
    <div id="artDiv">

    </div>
    <div class="blog-pagnation-wrapper">
        <button onclick="gofirstPage()" class="blog-pagnation-item">首页</button>
        <button onclick="gopreviousPage()" class="blog-pagnation-item">上一页</button>
        <button class="blog-pagnation-page" id="page">当前为第-页</button>
        <button onclick="gonextPage()" class="blog-pagnation-item">下一页</button>
        <button onclick="golastPage()" class="blog-pagnation-item">末页</button>
    </div>
</div>

<script>
    let pindex = 1;
    let psize = 5;
    let pages = 1;
    pindex = (getUrlValue("pindex") === '' ? 1 : getUrlValue("pindex"));
    console.log(pindex);

    function getBlogList() {

        let page = document.querySelector('#page');
        page.innerText = "当前为第" + pindex + "页"
        $.ajax({
            type: 'post',
            url: '/art/listbypage',
            data: {
                pindex: pindex,
                psize: psize
            },
            success: function (body) {
                if (body && body.code === 200) {
                    pages = body.data.pages;
                    console.log(pages);
                    // 两种情况,有无有发表文章
                    if (body.data && body.data.list.length > 0) {
                        // 发表文章了
                        let container = document.querySelector('#artDiv');
                        for (let blog of body.data.list) {
                            // 构造blog div
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';

                            // 构造博客标题
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;

                            // 构造博客时间
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.updateTime;

                            // 构造摘要
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.content;

                            // 构造查看全文按钮
                            let a1 = document.createElement('a');
                            a1.className = 'detail';
                            a1.href = 'blogDetail.html?id=' + blog.id;
                            a1.innerHTML = '查看全文 &gt;&gt;';

                            let subDiv = document.createElement('div');
                            subDiv.className = 'sub';
                            subDiv.appendChild(a1);


                            // 进行拼装
                            blogDiv.appendChild(titleDiv);
                            blogDiv.appendChild(dateDiv);
                            blogDiv.appendChild(descDiv);
                            blogDiv.appendChild(subDiv);
                            container.appendChild(blogDiv);
                        }
                    } else {
                        jQuery("#artDiv").html('<h3>暂无博客,快来发布博客吧!</h3>')
                    }
                } else {
                    alert('查询文章列表出错,请重试!')
                }
            }
        })
    }

    getBlogList();

    function gofirstPage() {
        location.href = "blogList.html";
    }

    function gopreviousPage() {
        if (parseInt(pindex) === 1) {
            // 如果是第一页
            location.href = "blogList.html?pindex=" + pages;
        } else {
            pindex = parseInt(pindex) - 1;
            location.href = "blogList.html?pindex=" + pindex;
        }
    }

    function gonextPage() {
        if (parseInt(pindex) === pages) {
            // 如果是最后一页
            location.href = "blogList.html?pindex=" + 1;
        } else {
            pindex = parseInt(pindex) + 1;
            location.href = "blogList.html?pindex=" + pindex;
        }
    }

    function golastPage() {
        location.href = "blogList.html?pindex=" + pages;
    }
</script>
</body>

</html>